<template>
  <a-tree
    v-if="treeData.length"
    :show-line="true"
    :show-icon="true"
    :load-data="onLoadData"
    :tree-data="treeData"
    :defaultExpandedKeys="defaultExpandedKeys"
    :replaceFields="{ title: 's_a_nam', key: 's_a_id', children: 'children' }"
    @select="handleSelect"
  >
  </a-tree>
</template>
<script lang="ts">
import { Vue, Mixins, Component, Prop, Watch } from 'vue-property-decorator'
import { appModule } from '@/store/modules/app'
import { publicServices, IArea } from '@/common/services/public'
import { cloneDeep } from 'lodash-es'
import { areaModule } from '@/store/modules/area'

@Component
export default class AreaTree extends Vue {
  @Prop({
    type: String,
  })
  public parentAreaId!: string

  @Prop({
    type: Array,
    default: [],
  })
  public defaultTreeNode!: IArea[]

  public defaultExpandedKeys: string[] = []
  public loadedKeys: string[] = []

  public treeData: IArea[] = []
  public mounted() {
  }

  get currentSelectArea() {
    return areaModule.currentSelectArea
  }

  get currentAreas() {
    return areaModule.currentAreas
  }

  @Watch('parentAreaId', { immediate: true })
  @Watch('defaultTreeNode', { immediate: true })
  public handlerRefresh() {
    if (this.defaultTreeNode.length) {
      console.log('this.defaultTreeNode: ', this.defaultTreeNode)
      this.currentAreas.length ? this.loadCurrentNode() : this.defaultLoadNext()
    } else {
      this.onLoadData()
    }
  }

  public async onLoadData(treeNode?: any) {
    const res = await publicServices.getAreaLazy({
      s_a_id: treeNode ? treeNode.dataRef.s_a_id : this.parentAreaId || '0',
    })
    // 判断是否是叶子节点
    const treeData = res.data.map((item) => {
      // 显示行政编码
      item.s_a_nam = `${item.s_a_nam}(${item.s_a_id})`
      if (item.s_a_id.length === 14) {
        // @ts-ignore
        item.isLeaf = true
      }
      return item
    })
    if (!treeNode) {
      this.treeData = treeData
    } else {
      treeNode.dataRef.children = treeData
      this.treeData = [...this.treeData]
      areaModule.SET_CURRENT_AREAS(this.treeData)
    }
  }

  public async defaultLoadNext() {
    if (this.defaultTreeNode.length) {
      this.defaultExpandedKeys = this.defaultTreeNode.map(_ => _.s_a_id)
    }
    this.treeData = [...this.defaultTreeNode].map((item) => {
      delete item.children
      return {
        ...item,
        s_a_nam: `${item.s_a_nam}(${item.s_a_id})`,
      }
    })
    // if (this.defaultTreeNode.length !== 1) {
    //   this.treeData = this.defaultTreeNode
    //   return
    // }
    // const parentId = this.defaultTreeNode[0].s_a_id
    // const treeNode = cloneDeep(this.defaultTreeNode)
    // const res = await publicServices.getAreaLazy({
    //   s_a_id: parentId || '0'
    // })
    // treeNode[0].children = res.data || []
    // this.treeData = treeNode
  }

  // 加载当前节点
  public loadCurrentNode() {
    if (this.currentSelectArea.s_a_id) {
      this.defaultExpandedKeys = [this.currentSelectArea.s_a_id]
      // @todo 切换完成后模拟点击
      // this.$nextTick(() => {
      //   this.$emit('click', this.currentSelectArea)
      // })
    } else if (this.defaultTreeNode.length){
      this.defaultExpandedKeys = this.defaultTreeNode.map(_ => _.s_a_id)
    }
    if (this.currentAreas.length) {
      this.treeData = [...this.currentAreas]
    }
  }

  public handleSelect(selectedKeys: string[], e: any) {
    areaModule.SET_CURRENT_SELECT_AREA(e.node.dataRef)
    this.$emit('click', e.node.dataRef)
  }
}
</script>
